<template>
  <div class="myInfo">
    <navBar title="我的资料" path="/home/my"></navBar>
    <div class="content">
      <myCell
        title="头像"
        :value="userInfo.avatar"
        type="img"
        class="round"
        @click.native="$router.push('/home/editInfo?type=avatar')"
      ></myCell>
      <div class="other-info">
        <myCell
          title="昵称"
          :value="userInfo.nickname"
          @click.native="$router.push('/home/editInfo?type=nickname')"
        ></myCell>
        <myCell
          title="性别"
          :value="genderObj[userInfo.gender]"
          @click.native="isShowGender = true"
        ></myCell>
        <myCell
          title="地区"
          :value="area.city_list[userInfo.area]"
          @click.native="isShowCity = true"
        ></myCell>
        <myCell
          title="个人简介"
          :value="userInfo.intro"
          @click.native="$router.push('/home/editInfo?type=intro')"
        ></myCell>
      </div>
      <van-button color="#fff" block @click="exit">
        <span class="red">退出登录</span>
      </van-button>
    </div>
    <!-- 性别 选择弹框 -->
    <van-popup v-model="isShowGender" position="bottom">
      <!-- 选择框
        van-picker
          title           顶部标题
          show-toolbar    是否显示顶部栏
          default-index	  单列选择时，默认选中项的索引
          columns   	    对象数组，配置每一列显示的数据
          @confirm        点击完成按钮时触发
              function(value值,index索引){ }
          @cancel	        点击取消按钮时触发

          genderObj:{ ['保密','男','女']
            0:'保密'
            1:'男'
            2:'女'
          }
          Object.values(对象名)
          Object.keys(对象名)
       -->
      <van-picker
        title="修改性别"
        show-toolbar
        :columns="Object.values(genderObj)"
        :default-index="userInfo.gender"
        @confirm="confirmEvent"
        @cancel="isShowGender = false"
      ></van-picker>
    </van-popup>
    <!-- 城市 弹框 -->
    <van-popup v-model="isShowCity" position="bottom">
      <van-area
        title="城市选择"
        :value="userInfo.area"
        :area-list="area"
        :columns-num="2"
        @cancel="isShowCity = false"
        @confirm="cityConfirm"
      ></van-area>
    </van-popup>
  </div>
</template>

<script>
import myCell from "./myCell";
import { mapState } from "vuex";
import area from "@/assets/js/area.js";
import { removeLocal } from "@/utils/local.js";
import { auEdit } from "@/api/my.js";
export default {
  components: {
    myCell,
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  data() {
    return {
      area: area,
      isShowGender: false,
      isShowCity: false,
      genderObj: {
        0: "保密",
        1: "男",
        2: "女",
      },
    };
  },
  methods: {
    exit() {
      this.$dialog
        .confirm({
          title: "提示",
          message: "是否退出登录",
        })
        .then(() => {
          // 清除token
          removeLocal();
          // 修改vuex登录状态
          this.$store.commit("setLoginStatus", false);
          // 跳转登录页面
          this.$router.push("/login");
        })
        .catch(() => {});
    },
    // 性别 确认
    async confirmEvent(value, index) {
      // // 编辑性别
      // await auEdit({ gender: index });
      // // 关闭弹窗
      // this.isShowGender = false;
      // // 提示
      // this.$toast.success("修改成功");
      // // 刷新
      // this.$store.dispatch("refreshUserInfo");
      this.edit_Info("gender", index);
    },
    // 城市 确认
    async cityConfirm(value, index) {
      // window.console.log(value, index);
      // await auEdit({ area: value[1].code });
      // this.isShowCity = false;
      // this.$toast.success("修改成功");
      // this.$store.dispatch("refreshUserInfo");
      this.edit_Info("area", value[1].code);
    },
    async edit_Info(key, value) {
      await auEdit({ [key]: value });
      this.isShowGender = false;
      this.isShowCity = false;
      this.$toast.success("修改成功");
      this.$store.dispatch("refreshUserInfo");
    },
  },
};
</script>

<style lang="less" scoped>
.myInfo {
  background-color: #f7f4f5;
  height: 100%;
  .content {
    padding: 20px @p15;
    .round {
      border-radius: 8px;
    }
    .other-info {
      margin-top: 10px;
      margin-bottom: 15px;
    }
    .red {
      color: red;
    }
  }
}
</style>